<template>
    <div class="app-container">
        <a-card>
            <BasicTable ref="tableRef" :params="params" :selectbox="false" :columns="columns" :query="query">
                <template #form>
                    <a-form-item label="日志标题" name="title">
                        <a-input v-model:value="params.title" placeholder="请输入日志标题" />
                    </a-form-item>
                </template>
                <template #table="{ body }">
                    <template v-if="body.column.key === 'businessType'">
                        <a-tag color="processing">{{ businessType(body.record.businessType) }}</a-tag>
                    </template>
                    <template v-if="body.column.key === 'operatorType'">
                        <a-tag color="processing">{{ operatorType(body.record.operatorType) }}</a-tag>
                    </template>
                    <template v-if="body.column.key === 'requestMethod'">
                        <a-tag color="processing">{{ body.record.requestMethod }}</a-tag>
                    </template>
                    <template v-if="body.column.key === 'operatorTime'">
                        {{ parseTime(body.record.operatorTime) }}
                    </template>
                    <template v-if="body.column.key === 'status'">
                        <a-tag v-if="body.record.status === 0" color="success">成功</a-tag>
                        <a-tag v-else color="error">失败</a-tag>
                    </template>
                </template>
            </BasicTable>
        </a-card>
    </div>
</template>
<script setup>
import { computed, reactive } from 'vue'
import { query } from '/@/api/System/Log'
import { BasicTable } from '@iframe/tools/components'
import { parseTime } from '@iframe/tools/plugins/index.js'

const businessTypeOption = {
    0: '登录',
    1: '注册',
    2: '退出',
    3: '修改',
    4: '删除',
    5: '保存',
    6: '查询',
    7: '导入',
    8: '导出',
    9: '其他'
}

const operatorTypeOption = {
    0: '后端管理系统',
    1: '手机端',
    2: '公众号',
    3: '小程序'
}

const params = reactive({
    title: null
})

const columns = [
    {
        title: '日志标题',
        dataIndex: 'title',
        key: 'title',
        align: 'center',
        width: 150
    },
    {
        title: '业务类型',
        dataIndex: 'businessType',
        key: 'businessType',
        align: 'center',
        width: 120
    },
    {
        title: '操作类别',
        dataIndex: 'operatorType',
        key: 'operatorType',
        align: 'center',
        width: 130
    },
    {
        title: '请求地址',
        dataIndex: 'requestUrl',
        key: 'requestUrl',
        align: 'center',
        width: 180
    },
    {
        title: '请求方法',
        dataIndex: 'requestMethod',
        key: 'requestMethod',
        align: 'center',
        width: 100
    },
    {
        title: '请求参数',
        dataIndex: 'operatorParams',
        key: 'operatorParams',
        align: 'center',
        ellipsis: true
    },
    {
        title: '执行方法',
        dataIndex: 'method',
        key: 'method',
        align: 'center',
        width: 450
    },

    {
        title: '操作时间',
        dataIndex: 'operatorTime',
        key: 'operatorTime',
        align: 'center',
        width: 180
    },
    {
        title: '操作结果',
        dataIndex: 'jsonResult',
        key: 'jsonResult',
        align: 'center',
        ellipsis: true
    },
    {
        title: '操作人',
        dataIndex: 'operatorName',
        key: 'operatorName',
        align: 'center',
        width: 200
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: 100
    },
    {
        title: '时长（ms）',
        dataIndex: 'costTime',
        key: 'costTime',
        align: 'center',
        width: 100
    }
]

const businessType = computed(() => {
    return business => businessTypeOption[business]
})

const operatorType = computed(() => {
    return operator => operatorTypeOption[operator]
})
</script>
